<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>crud-demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .root {
      margin: 50px auto;
      width: 70%;
      padding: 30px;
      border-radius: 10px;
      background-color: blue;
    }

    .list {
      width: 100%;
      height: 32px;
      background-color: gray;
      color: white;
      line-height: 32px;
      padding: 0 20px;
      margin: 10px 0;
      border-radius: 6px;
      cursor: pointer;
    }
  </style>
</head>

<body>

  <div class="root">
    <div class="list">
      长颈鹿
    </div>
  </div>


  <script>

    function request(url, method, params) {
      return new Promise((resolve) => {
        const headers = {
          "Content-Type": "application/json",
        }
        let __url = url
        if (method === 'get') {
          let str = '?';
          for (key in params) {
            str += `${key}=${params[key]}&`
          }
          str = str.slice(0, -1);
          __url += str
        }
        window.fetch(`http://localhost:3000/${url}`, {
          method: method,
          headers
        }).then(res => res.json()).then(resp => {
          if (resp.code === 200) {
            resolve(resp.data)
          } else {
            alert(resp.msg)
          }
        })
      })
    }

    const http = {
      async get(url, params) {
        return request(url, 'get', params)
      },
      async post() {
        return request(url, 'post', params)
      }
    }

    http.get('animal/searchAll').then(resp => {
      const dom = document.querySelector(".root")

      resp.forEach(item => {
        dom.innerHTML += `<div class='list'>${item.name}</div>`
      })
    })





  </script>

</body>

</html>